<template>
  <view class="register-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <uni-icons type="arrow-left" size="24" color="#333"></uni-icons>
      </view>
      <view class="page-title">注册账号</view>
    </view>
    
    <!-- 注册表单 -->
    <view class="register-form">
      <!-- 手机号码 -->
      <view class="form-item">
        <view class="form-label">手机号码</view>
        <input 
          type="number" 
          class="form-input" 
          placeholder="请输入手机号码" 
          v-model="formData.phone"
          maxlength="11"
        />
      </view>
      
      <!-- 验证码 -->
      <view class="form-item">
        <view class="form-label">验证码</view>
        <view class="verification-code">
          <input 
            type="number" 
            class="form-input" 
            placeholder="请输入验证码" 
            v-model="formData.code"
            maxlength="6"
          />
          <button 
            class="code-btn" 
            :disabled="isSending" 
            @click="getVerificationCode"
          >
            {{ codeText }}
          </button>
        </view>
      </view>
      
      <!-- 姓名 -->
      <view class="form-item">
        <view class="form-label">姓名</view>
        <input 
          type="text" 
          class="form-input" 
          placeholder="请输入您的姓名" 
          v-model="formData.username"
        />
      </view>
	  
	  <!-- 密码 -->
	  <view class="form-item">
	    <view class="form-label">密码</view>
	    <input 
	      type="text" 
	      class="form-input" 
	      placeholder="请输入您的密码" 
	      v-model="formData.password"
	    />
	  </view>
      
      <!-- 性别 -->
      <view class="form-item">
        <view class="form-label">性别</view>
        <view class="gender-options">
          <view 
            class="gender-option" 
            :class="{ active: formData.gender === 1 }"
            @click="formData.gender = 1"
          >
            <uni-icons type="man" size="24" :color="formData.gender === 1 ? '#ff7a45' : '#999'"></uni-icons>
            <text>男</text>
          </view>
          <view 
            class="gender-option" 
            :class="{ active: formData.gender === 2 }"
            @click="formData.gender = 2"
          >
            <uni-icons type="woman" size="24" :color="formData.gender === 2 ? '#ff7a45' : '#999'"></uni-icons>
            <text>女</text>
          </view>
        </view>
      </view>
      
      <!-- 真实姓名 -->
      <view class="form-item">
        <view class="form-label">真实姓名</view>
        <input 
          type="text" 
          class="form-input" 
          placeholder="请输入您的真实姓名" 
          v-model="formData.realName"
        />
      </view>
    </view>
    
    <!-- 完成注册按钮 -->
    <button class="register-btn" @click="handleRegister">
      <uni-icons type="checkmarkempty" size="20" color="#fff"></uni-icons>
      <text>完成注册</text>
    </button>
  </view>
</template>

<script setup>
import { ref, reactive,onUnmounted } from 'vue'
import { register } from '@/api/login.js'

// 表单数据
const formData = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  phone: '',
  realName: '',
  gender: 1
});



// 验证码相关
const isSending = ref(false);
const codeText = ref('获取验证码');
let timer = null;

// 获取验证码
const getVerificationCode = () => {
  // 手机号验证
  if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    });
    return;
  }
  
  // 发送验证码逻辑
  isSending.value = true;
  let countdown = 60;
  codeText.value = `${countdown}s`;
  
  timer = setInterval(() => {
    countdown--;
    codeText.value = `${countdown}s`;
    if (countdown <= 0) {
      clearInterval(timer);
      isSending.value = false;
      codeText.value = '获取验证码';
    }
  }, 1000);
  
  // 这里添加发送验证码的API调用
  uni.showToast({
    title: '验证码已发送',
    icon: 'success'
  });
};

// 注册处理
const handleRegister = async () => {
  // 表单验证
  if (!formData.phone) {
    uni.showToast({ title: '请输入手机号', icon: 'none' });
    return;
  }
  if (!formData.code) {
    uni.showToast({ title: '请输入验证码', icon: 'none' });
    return;
  }
  if (!formData.username) {
    uni.showToast({ title: '请输入姓名', icon: 'none' });
    return;
  }
  if (!formData.realName) {
      uni.showToast({ title: '请输入真实姓名', icon: 'none' });
      return;
    }
  
  // 这里添加注册API调用
  uni.showLoading({
    title: '注册中...'
  });
  console.log(formData.username);
  formData.confirmPassword = formData.password
  formData.gender = formData.gender == 1 ? '男' : '女'
  const res = await register(formData)
  console.log(res);
  uni.hideLoading();
  
  uni.showToast({
    title: '注册成功',
    icon: 'success'
  });
  
  uni.navigateBack();
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 组件销毁时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
</script>

<style lang="scss" scoped>
.register-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 40rpx;
  
  .nav-bar {
    display: flex;
    align-items: center;
    height: 90rpx;
    padding: 0 30rpx;
    border-bottom: 1px solid #f0f0f0;
    
    .back-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .page-title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
      margin-right: 60rpx; // 为了标题居中
    }
  }
  
  .register-form {
    padding: 30rpx;
    
    .form-item {
      margin-bottom: 40rpx;
      
      .form-label {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 20rpx;
      }
      
      .form-input {
        height: 100rpx;
        background-color: #f5f5f5;
        border-radius: 10rpx;
        padding: 0 30rpx;
        font-size: 32rpx;
      }
      
      .verification-code {
        display: flex;
        align-items: center;
        
        .form-input {
          flex: 1;
          margin-right: 20rpx;
        }
        
        .code-btn {
          width: 200rpx;
          height: 100rpx;
          line-height: 100rpx;
          background-color: #fff;
          color: #ff7a45;
          border: 1px solid #ff7a45;
          border-radius: 10rpx;
          font-size: 28rpx;
          padding: 0;
          
          &:disabled {
            color: #999;
            border-color: #ddd;
          }
        }
      }
      
      .gender-options {
        display: flex;
        
        .gender-option {
          flex: 1;
          height: 100rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #f5f5f5;
          border-radius: 10rpx;
          margin-right: 20rpx;
          
          &:last-child {
            margin-right: 0;
          }
          
          &.active {
            background-color: rgba(255, 122, 69, 0.1);
            border: 1px solid #ff7a45;
          }
          
          text {
            margin-left: 10rpx;
            font-size: 32rpx;
            color: #333;
          }
        }
      }
    }
  }
  
  .register-btn {
    width: 90%;
    height: 100rpx;
    margin: 0 auto;
    background-color: #ff7a45;
    color: #fff;
    border-radius: 10rpx;
    font-size: 36rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    text {
      margin-left: 10rpx;
    }
  }
}
</style>